// Mixins

// Clearfix
@mixin clearfix
  .clearfix,
  .container
    &:after,
    &:before
      content: "."
      display: block
      height: 0
      clear: both
      visibility: hidden
      clear: both
      zoom: 1
    * html &
      height: 1px
  .clear
    clear: both
    display: block
    overflow: hidden
    visibility: hidden
    width: 0
    height: 0


// Box Sizing
@mixin box-sizing($value:border-box)
  -webkit-box-sizing: $value
  -moz-box-sizing: $value
  box-sizing: $value


// Center a sized element
@mixin auto-center
  margin-left: auto
  margin-right: auto
  

// Floating elements
@mixin float-left
  float: left  
@mixin float-right
  float: right



// Show and Hide Elements within Grid
@mixin hide-desktop
  .hide-desktop
    display: none !important
  .hide-mobile
    display: block !important

@mixin hide-mobile
  .hide-desktop
    display: block !important
  .hide-mobile
    display: none !important

@mixin show-mobile
  .show-mobile
    display: block !important

@mixin show-desktop
  .show-desktop
    display: block !important



// Two color gradient
// @include gradient-two(#1, #2)
@mixin gradient-two($start, $end)
  background: $start
  background: -moz-linear-gradient(top,  $start 0%, $end 100%)
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end))
  background: -webkit-linear-gradient(top,  $start 0%,$end 100%)
  background: -o-linear-gradient(top,  $start 0%,$end 100%)
  background: -ms-linear-gradient(top,  $start 0%,$end 100%)
  background: linear-gradient(top,  $start 0%,$end 100%)

// Three color gradient - custom
// @include gradient-three(#1, #2, #3)
@mixin gradient-three($start, $middle, $end)
  background: $start
  background: -moz-linear-gradient(top,  $start 0%, $middle 40%, $end 100%)
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(40%,$middle), color-stop(100%,$end))
  background: -webkit-linear-gradient(top,  $start 0%,$middle 40%,$end 100%)
  background: -o-linear-gradient(top,  $start 0%,$middle 40%,$end 100%)
  background: -ms-linear-gradient(top,  $start 0%,$middle 40%,$end 100%)
  background: linear-gradient(top,  $start 0%,$middle 40%,$end 100%)

// Box Shadow - custom with defaults (4 values)
// @include box-shadow
@mixin box-shadow($top: 0, $bottom: 0, $spread: 5px, $color: rgba(#000, .4))
  -moz-box-shadow: $top $bottom $spread $color
  -webkit-box-shadow: $top $bottom $spread $color
  -ms-box-shadow: $top $bottom $spread $color
  -o-box-shadow: $top $bottom $spread $color
  box-shadow: $top $bottom $spread $color



// Border Radius Mixins
@mixin border-radius($radius, $radius2:$radius)
  -webkit-border-radius: $radius $radius2
  -moz-border-radius: $radius $radius2
  -ms-border-radius: $radius $radius2
  -o-border-radius: $radius $radius2
  border-radius: $radius $radius2
  
@mixin border-top-left-radius($radius)
  border-radius: $radius 0 0 0
  
@mixin border-top-right-radius($radius)
  border-radius: 0 $radius 0 0
  
@mixin border-bottom-left-radius($radius)
  border-radius: 0 0 $radius 0
  
@mixin border-bottom-right-radius($radius)
  border-radius: 0 0 0 $radius
  
  
  
// Typography
@mixin force-wrap
  white-space: pre
  white-space: pre-wrap
  white-space: pre-line
  white-space: -pre-wrap
  white-space: -o-pre-wrap
  white-space: -moz-pre-wrap
  white-space: -hp-pre-wrap
  word-wrap: break-word
  
//@mixin default-heading($color, $size)
//  color: $color
//  display: block
//  font-family: $heading-font
//  font-size: $size
//  line-height: $line-height


// Headings
//@mixin heading($size, $margin-height, $color: $text-color)
//  @include default-heading($color, $size)
//  font-weight: bold
//  margin: $margin-height 0

//@mixin header-headings($size, $color)
//  @include default-heading($color, $size)
//  font-weight: normal
//  margin: 10px 0